<template>
  <!--购买记录  杨灿-->
  <div>
    <el-row>
      <el-col :span="5" :offset="1">
        <el-input
          placeholder="请输入订单号"
          v-model="message"
          clearable>
        </el-input>

      </el-col>
      <el-col :span="1">
        <el-button icon="el-icon-search" circle></el-button>
      </el-col>

      <el-col :span="5" :offset="10">
        <el-button @click="exportPurchaseService">导出</el-button>
        <router-link to="/ApplyInvoice"> <el-button type="primary">购买服务</el-button></router-link>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            fixed
            prop="orderNum"
            label="订单号"
           >
          </el-table-column>
          <el-table-column
            prop="serviceBean.serviceName"
            label="服务类别"
            >
          </el-table-column>
          <el-table-column
            prop="serviceBean.serviceMoney"
            label="订单金额"
           >
          </el-table-column>
          <el-table-column
            prop="realMoney"
            label="实付金额"
            >
          </el-table-column>
          <el-table-column
            prop="payStyle"
            label="支付方式"
            >
          </el-table-column>
          <el-table-column
            prop="orderTime"
            label="下单时间"
           >
          </el-table-column>
          <el-table-column
            prop="payTime"
            label="支付时间"
           >
          </el-table-column>
          <el-table-column
            prop="orderStatus"
            label="状态"
            >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">支付</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16" :offset="3">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pagesize"
          layout="prev, pager, next, jumper"
          :total="totalCount">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios';
    export default {
      name: "PurchaseServiceManager",
      created () {
        this.getData(1)
      },
      methods: {
        handleClick(row) {
          console.log(row);
        },
        handleSizeChange(val) {
          this.pagesize = val;
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          this.currentPage=val;
          console.log(`当前页: ${val}`);
        },
        exportPurchaseService: function(){
          window.location.href="http://localhost:9100/serviceOrder/exportAll?userId=1";
        },
        getData: function(){
          let url = 'http://localhost:9100/serviceOrder/allByPage';

          // 配置url参数
          let params = {

            currentPage:this.currentPage,
            userId:1
          }

          // 发起axios请求接口

          axios.get(url, {params})
            .then(res => {
              // 得到后台数据
              //赋值给tableData
              console.info(res);
              this.tableData=res.data.data.list;
              this.totalCount=res.data.data.total;

            })
            // 响应失败
            .catch(err => {
              alert('链接错误')
            })
        },
        dateToString: function(row){
          let s=row.registerTime;
          //将后台传过来的valueOf格式的时间改成yyyy/m/d的格式
          const
            date = new Date(s),
            y = date.getFullYear(),
            m = date.getMonth() + 1,
            d = date.getDate()

          return `${y}/${m < 10 ? '0'+m : m}/${d < 10 ? '0' + d : d}`
        }
      },
      data() {
        return {
          message: '',
          tableData: [],
          //默认每页数据量
          pagesize: 5,

          //当前页码
          currentPage: 1,

          //查询的页码
          start: 1,

          //默认数据总数
          totalCount: 1,
        }
      }
    }
</script>

<style scoped>

</style>
